<template>
    <div style="padding-top: 20px;">
      <div style="display: flex;justify-content: flex-end;">
        <el-button type="primary" @click="add">新建挑战</el-button>
      </div>
       <div v-for="v in list" class="listt" @click="cli(v)">
        <div style="margin-bottom: 20px;">{{ $store.state.user.name }}</div>
<div>
    {{ v.time }}
</div>
       </div>
       <el-dialog
  title="随机挑战"
  :visible.sync="dialogVisible"
  width="30%"
  :before-close="handleClose">
  <div class="item" v-for="(v,i) in tlist">
<div class="title">{{i+1}}·{{ v.title }}（{{ v.type==1?'单选题':v.type==2?'多选题':'判断题' }}）  {{ v.jifen }}分   {{ v.status==1?'正确':v.status==2?'错误':'' }} 
<span v-if="v.status==2">正确答案{{ v.daan }}</span>

</div>
            <div class="list">
                <el-checkbox-group v-model="v.udaan" :max="v.type!=2?1:6" :disabled="disabled">
    <div>
        <el-checkbox :label="vv.zimu" v-for="vv in v.list" >{{vv.zimu}}.{{ vv.title }}</el-checkbox>
    </div>
  </el-checkbox-group>

            </div>
        </div>
        <el-button type="primary" :disabled="disabled"  @click="tijiao">提交考试</el-button>

</el-dialog>
    </div>
</template>

<script>
import api from "@/api/index"
    export default {
        data() {
            return {
                dizhi: {},
                list:[],
                tlist:[],
                v:null,
                gouwu:false,
                disabled:false,
                dialogVisible:false
            }
        },
          computed: {
          
        },
        methods: {
            tijiao(){
             let index= this.tlist.findIndex(v=>!v.udaan || !v.udaan.length)
             console.log(index,this.tlist);
if(index!=-1){
    return   this.$message({
                        message: `第${index+1}题不能为空`,
                        type: 'warning'
                    });
}
                this.tlist.forEach(v=>{
                    v.udaan=v.udaan.join(',')
                    v.uid=this.$store.state.user.id
                })
                api.addtiaozhan(this.tlist).then(res=>{
this.cli(this.v)
                })
            },
            cli(v){
                this.v=v
                api.gettiaozhanlist({
            tiaozhanid:v.id,
            uid:this.$store.state.user.id
         }).then(res=>{
            this.tlist=res.data
            this.tlist.forEach(v=>{
                v.udaan=v.udaan?v.udaan.split(","):[]
                v.list&& v.list.forEach((vv,i)=>{
                    
                    vv.zimu=i==0?'A':i==1?'B':i==2?'C':'D'
                    return vv
                })
                this.disabled=this.tlist[0].udaan.length
            })
            this.dialogVisible=true
            // console.log(this.list);
            api.getUSer({uid:this.$store.state.user.id}).then(res=>{
                this.$store.commit("SET_USER", res.data)
                localStorage.setItem('user', JSON.stringify(res.data))
            })
         })
            },
            getList(){
               api.gettiaozhan({uid:this.$store.state.user.id}).then(res=>{
this.list=res.data
               })
            },
            add(){
                api.tiaozhanadd({uid:this.$store.state.user.id}).then(res=>{
                    this.$message({
                        message: '成功',
                        type: 'success'
                    });
                    this.getList()
                })
            }
        },
        mounted () {
         this.getList()
        },
    }
</script>

<style lang="scss" scoped>
.listt{
    
    margin: 0 auto;
    padding: 20px;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 60%;
    border: 1px solid #ddd;
    margin-top: 20px;
    transition: .2s ;
    cursor: pointer;
&:hover{
    background-color: white;
}
}
.item{
    border-bottom: 1px solid #ddd;
    padding: 20px;
    font-size: 18px;
    .list{
        padding: 10px 20px;
    }
}
</style>